<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .one {
            width: 200px;
            height: 200px;
            border: 1px solid #333;
        }
    </style>
</head>

<body>

    <!-- <div id="box1" class="one two three" style="background: red;"></div> -->
    <div id="box1" class="one two three">1</div>
    <div id="box2" class="one two three">
        2
    </div>
    <div id="box3" class="one two three">
        <h3>3</h3>
    </div>
    <div id="box4" class="one two three">4</div>


</body>
<script>
    //浏览器的容错机制 => 变量没有定义,会到页面中查找对应id名的元素
    // a. 找到的 => 赋值给变量
    // b. 找不到 => 报错 xxx is not defined
    // console.log(box1);
    // console.log(one);
</script>
<script>
    // 注意
    // 1. JS操作元素之前需要先获取元素
    // 2. JS操作元素改变样式时 都是通过内联style实现的
    // 3. 能改变元素的只有元素本身 (改变的同一个引用地址)

    // id
    var box1 = document.getElementById("box1"); // 对应id名获取元素 赋值给变量box1
    console.log(box1);

    // class
    var oneList = document.getElementsByClassName("one");
    console.log(oneList);

    // 绑定事件的固定写法: 当点击box1时,执行既定的函数 (浏览器监听到点击动作 触发事件)
    // 页面加载时 => 绑定事件
    box1.onclick = function () {
        // alert(1111);

        // style
        box1.style.backgroundColor = "red";
        box1.style.fontSize = "40px";
        box1.style.color = "#fff";
        box1.style.textAlign = "center";
        box1.style.lineHeight = "200px";

    }

    oneList[1].onclick = function () {
        // alert(2222);

        // 修改元素的内容 非表单元素(文本  html结构)

        // innerText   获取和设置元素的文本结构
        // innerHTML   获取和设置元素的html结构

        // 取值  => 直接使用 或 在等号右边
        // console.log(oneList[1].innerText);  // 直接取

        // var text = oneList[1].innerText;  // 取值之后赋值给变量text
        // console.log(text);
        // console.log(typeof text);

        // 赋值   在等号左边
        // oneList[1].innerText = "hello";  //把第二个盒子的文本设置为hello


        // 问题!!!!!!!
        var text = oneList[1].innerText; //  取值之后赋值给变量text  =>  text="2";
        // text = "hello";  //对变量重新赋值  text = "hello";





    }


    oneList[2].onclick = function () {
        // alert(2222);

        // 修改元素的内容 非表单元素(文本  html结构)

        // innerText   获取和设置元素的文本结构 (忽略html结构 => 标签)
        // innerHTML   获取和设置元素的html结构 (html/文本结构)

        // 元素内有html结构时, innerText也只获取文本相关的
        // innerText 如果设置html结构 会原样输出(并不会被浏览器解析成html)




        // 取值  => 直接使用 或 在等号右边   
        // console.log(oneList[2].innerText);  // 直接取  
        // console.log(oneList[2].innerHTML);  // 直接取


        // 赋值
        // oneList[2].innerText = "<p>11111111</p>";  // innerText 如果设置html结构 会原样输出(并不会被浏览器解析成html)

        oneList[2].innerHTML = "<p>11111111</p>";








    }












</script>

</html>